import type {  User, UserStoreProps } from '@/types'
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

/**
 * useUserStore有两种使用方式：
 *  1.作为hook方法在组件函数中使用，创建一个对象，对象具有响应式，数据变化可以重刷组件函数引起视图变化
 *      const userStore = useUserStore(); 
 *  2.作为对象直接使用，在普通函数中无法使用1.的方式调用hook，所以直接作为对象，获取仓库数据
 *      useUserStrore.getState().token;
 * 
 * 总结：
 *  1.如果在react组件函数中，则使用方式1，可以在修改仓库数据时，引起视图变化
 *  2.如果在非组件函数中，则使用方式2，因为非组件函数无法调用hook，所以只能通过方式2来获取仓库数据
 *
 */
export const useUserStore = create<UserStoreProps>()(
  persist(
    (set, get) => ({
      userInfo: {},
      token: '',
      setToken: (token) => set({token: token}),
      clearToken: () => set({token: ''}),
      setUserInfo: (userInfo: User) => set({userInfo: {...userInfo}}), // 只修改userInfo
      clearUserInfo: () => set({userInfo: {}})
    }),
    {
      name: 'user-storage', // name of the item in the storage (must be unique)
      storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
    },
  ),
)

export const userStore = useUserStore; // 等价于上方export const useUserStore = create<UserStoreProps>() 只是起个别名